<template>
  <div class="my-mv">
    <home-nav  :title="'我的视频(' + mvSub.count + ')'" :more="false"/>
    <ul class="flex flex-wrap" >
      <li v-for="item in mvSub.data" :key="item.vid" style="margin: 0 auto">
        <div class="w-60 h-35 relative cursor-pointer" @click="jumpMv(item.vid)">
          <img style="height: 100%;width: 100%" :src="item.coverUrl" alt="">
          <span class="playerTime">{{ timestampToSecondsMinutes(item.durationms) }}</span>
          <span class="look">{{decimals(item.playTime, 1)}}</span>
        </div>
        <div class="mb-2">
          <span class="truncate w-55 inline-block mt-1 yu-textColor-hover">{{item.title}}</span>
          <div class=" text-xs">
            <span>by </span>
            <span class="mr-1 yu-textColor-hover" v-for="cr in item.creator" :key="cr.userId" @click="jumHomePage(cr.userId)">{{ cr.userName }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {getMvSublist} from "@/api/mv/index";
import { timestampToSecondsMinutes } from "@/utils/index";
import decimals from '@/hooks/filter'
import {ref} from "vue";
import {useStore} from "@/store/index";
import {useRouter} from "vue-router";

const router = useRouter()
const store = useStore()
// mv列表容器
const mvSub = ref({})
getMvSublist().then(res => {
  if(Number(res.code) === 200) mvSub.value = res
  console.log(res)
})
// 跳转到mv
const jumpMv = (id) => {
  console.log(id)
  router.push({
    path: '/mv',
    query: {
      id
    }
  })
}

const jumHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}
</script>

<style scoped lang="scss">
.my-mv {
  .playerTime {
    display: inline-block;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 2px;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(0, 0, 0, .7));
  }
  .look {
    display: inline-block;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 2px;
    text-align: right;
    font-size: 13px;
    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(0, 0, 0, .7));
  }
}
</style>
